<template>
  <div id="table">
    <el-row style="margin: 10px 0px 20px 20px">
      <el-col :span="24">
        <el-button size="mini" type="success" icon="el-icon-plus" @click="addCol">添加</el-button>
        <el-button size="mini" type="danger" icon="el-icon-minus" @click="deleteSelected">删除</el-button>
        <el-button size="mini" type="success" icon="el-icon-edit" @click="editAll">编辑</el-button>
        <el-button size="mini" type="warning" icon="el-icon-upload2" @click="ensureEdit">确认修改</el-button>
        <el-button size="mini" type="success" icon="el-icon-back">导入</el-button>
        <el-button size="mini" type="success" icon="el-icon-right">导出</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      height="700px"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        width="150px"
        v-for="item in column"
        :key="item"
        :label="item">
        <template slot-scope="scope">
          <el-input size="small" v-model="tableData[scope.$index][item]" v-if="edit"></el-input>
          <div class="center" v-else>{{scope.row[item]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="1"
      :page-sizes="[10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
  import {addAndChangeCols, deleteCols} from "../api/tableRequest"

  export default {
    name: "tableView",
    props: {
      toChildrenData: {
        column: {
          type: Array
        },
        tableData: {
          type: Array
        }
      },
      lh: String,
      database: String,
      tableName: String
    },
    data() {
      return {
        edit: false, // 编辑判断条件
        column: this.toChildrenData.column, // 列数
        tableData: this.toChildrenData.tableData, // 整个数据
        multipleSelection: [], // 选择的行
      }
    },
    methods: {
      editAll() {
        this.edit = true
      },
      // 修改确定，包括添加和修改
      ensureEdit() {
        this.edit = false
        // 传整个tableData修改
        console.log('tableData: ', this.tableData);
        let changeData = {
          lh: this.lh,
          DbName: this.database,
          DbTable: this.tableName,
          tableData: this.tableData
        }
        addAndChangeCols(changeData)
          .then(res => {
            console.log('修改的res: ',res);
            // 更新数据
            let refreshParams = {
              lh: this.lh,
              DbName: this.database,
              DbTable: this.tableName
            }
            this.$emit('refresh', refreshParams)
          })
          .catch(err => {
            console.log(err);
          })
      },
      // 添加
      addCol() {
        let obj = {}
        for (let i = 0; i < this.column.length; ++i) {
          obj[this.column[i]] = ''
        }
        this.tableData.push(obj)
        this.edit = true
      },
      // 点击复选框
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 删除
      deleteSelected() {
        // 删除请求
        console.log("删除请求：",this.multipleSelection);
        let deleteData = {
          lh: this.lh,
          DbName: this.database,
          DbTable: this.tableName,
          deleteData: this.multipleSelection
        }
        deleteCols(deleteData)
          .then(res => {
            console.log(res);
            let refreshParams = {
              lh: this.lh,
              DbName: this.database,
              DbTable: this.tableName
            }
            this.$emit('refresh', refreshParams)
          })
          .catch(err => {
            console.log(err);
          })
      }
    },
  }
</script>

<style scoped>
  .center {
    height: 32px;
    vertical-align: middle;
    display: table-cell;
  }
</style>
